<script setup lang="ts">
import { ref, watch, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { NModal, NCard, NSpace, NForm, NFormItem, NInput, NButton, useNotification } from 'naive-ui'
import type { ApprovalData } from '../model'
import http from '@/tools/http'

const props = defineProps(["taskIdList", "visiable"])
const emits = defineEmits(["update:visiable", "complete"])

const router = useRouter()
const route = useRoute()
const notification = useNotification()

const approveFormData = reactive<ApprovalData>({
    message: ""
})

onMounted(() => {
    approveFormData.message = ""
})

function approveSubmit(approveFlag: string) {
    const request = {
        taskList: [...props.taskIdList],
        message: approveFormData.message,
        approveFlag: approveFlag
    }
    if (request.taskList.length > 0) {
        http.post("/workflow/ru/instance/task/approve", request).then(({ data }) => {
            if (data.code === "0") {
                closeForm()
                notification['success']({
                    content: '处理成功',
                    meta: `${data.msg}`,
                    duration: 2500,
                    keepAliveOnHover: true
                })
                emits("complete")
            }
        })
    }
}

function closeForm() {
    emits("update:visiable", false)
}
</script>

<template>
    <n-modal :show="visiable">
        <n-card style="width: 500px;height: 350px;" :content-style="{ paddingBottom: '0px' }" title="流程审批" closable
            @close="closeForm()">
            <n-form style="height:100%;" :model="approveFormData">
                <n-form-item style="height:100%;" label="审批意见">
                    <n-input style="height:100%;" type="textarea" v-model:value="approveFormData.message"
                        placeholder="请填写审批意见" clearable />
                </n-form-item>
            </n-form>
            <template #footer>
                <n-space justify="end">
                    <n-button attr-type="button" @click="closeForm()">取消</n-button>
                    <n-button attr-type="button" type="error" @click="approveSubmit('0')">拒绝</n-button>
                    <n-button attr-type="button" type="primary" @click="approveSubmit('1')">同意</n-button>
                </n-space>
            </template>
        </n-card>
    </n-modal>
</template>

<style scoped></style>